<template>
  <div class="upms-head">
    <a-row>
      <a-col :xs="{span:24}" :sm="{span:24}" :md="{span:6}" :lg="{span:5}" :xxl="{span:4}" class="header-left">
        <div class="upms-head-txt">
          通用权限管理系统
        </div>
      </a-col>
      <a-col :xs="{span:0}" :sm="{span:0}" :md="{span:18}" :lg="{span:19}" :xxl="{span:20}">
        <a-menu v-model="current" mode="horizontal">
          <a-menu-item v-for="menu in menuList" :key="menu.menuCode" style="float: left;" v-if="menu.menuId">
            <a-icon type="appstore"/>
            {{menu.menuName}}
          </a-menu-item>
          <a-sub-menu style="float: right">
            <span slot="title" class="submenu-title-wrapper"><a-icon type="setting"/>管理员中心<a-icon type="down"/></span>
            <a-menu-item key="setting:1" @click="updateModal.visible = true">修改密码</a-menu-item>
            <a-menu-item key="setting:2">
              <div @click="Logout">退出登陆</div>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-col>
    </a-row>
    <a-modal v-model="updateModal.visible" title="修改密码">
      <a-form :form="updateModal.form">
        <a-form-item label="成员账号" :label-col="modal.labelCol" :wrapper-col="modal.wrapperCol">
          <a-input placeholder="请输入成员账号！"
                   v-decorator="['username', {rules: [{ required: true, message: '请输入成员账号！'}]}]"/>
        </a-form-item>
        <a-form-item label="旧密码" :label-col="modal.labelCol" :wrapper-col="modal.wrapperCol">
          <a-input placeholder="请输入旧密码！" type="password"
                   v-decorator="['password', {rules: [{ required: true, message: '请输入旧密码！'}]}]"/>
        </a-form-item>
        <a-form-item label="新密码" :label-col="modal.labelCol" :wrapper-col="modal.wrapperCol">
          <a-input placeholder="请输入新密码！" type="password"
                   v-decorator="['newPassword', {rules: [{ required: true, message: '请输入新密码！'}]}]"/>
        </a-form-item>
        <a-form-item label="确认密码" :label-col="modal.labelCol" :wrapper-col="modal.wrapperCol">
          <a-input placeholder="请输入确认密码！" type="password"
                   v-decorator="['confirmPassword', {rules: [{ required: true, message: '请输入确认密码！'}, {
              validator: compareToFirstPassword,
            }]}]"/>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button key="submit" type="primary" :loading="modal.loading" @click="updatePwdOk">
          确定
        </a-button>
        <a-button key="back" @click="modal.visible = false">取消</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {ADMIN_INFO} from '../store/mutation-types'

  export default {
    name: 'UpmsHeader',
    components: {
      Vue
    },
    data () {
      return {
        current: ['admin'],
        width: this.$store.state.screenWidth - 200,
        adminInfo: {},
        menuList: [],
        modal: {
          visible: false,
          style: 'border: 0px solid red',
          labelCol: {span: 10},
          wrapperCol: {span: 14},
          loading: false
        },
        updateModal: {
          form: this.$form.createForm(this),
          visible: false,
          loading: false
        }
      }
    },
    mounted () {
      this.adminInfo = Vue.ls.get(ADMIN_INFO)
      this.init()
    },
    watch: {
      '$store.state.adminInfo' () {
        this.adminInfo = this.$store.state.adminInfo
        this.init()
      }
    },
    methods: {
      init () {
        this.menuList = this.adminInfo.menuTree
        this.current[0] = this.menuList[0].menuCode
      },
      // 退出登陆
      Logout () {
        this.$store.dispatch('Logout')
        Vue.ls.set(ADMIN_INFO, null)
      },
      // 新密码和确认密码校验
      compareToFirstPassword (rule, value, callback) {
        const form = this.updateModal.form
        if (value && value !== form.getFieldValue('newPassword')) {
          callback(new Error('新密码和确认密码不一致'))
        } else {
          callback()
        }
      },
      // 更新密码
      updatePwdOk () {
        this.updateModal.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values)
            this.http.post('upmsApi', '/admin/centre/updatePassword', {
              account: values.username,
              password: values.password,
              newPassword: values.newPassword,
              cert: '1'
            }).then((res) => {
              if (res.success) {
                this.$message.info('修改密码成功！')
              }
              this.updateModal.visible = false
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .upms-head {
    height: 48px;
    line-height: 48px;
    text-align: center;

    .upms-head-txt {
      border-right: 1px solid #ebedf0;
      height: 20px;
      line-height: 20px;
      width: 100%;
      text-align: center;
      margin-top: 14px;
    }
  }
</style>
